<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
  /* 设置侧轴排列方式（多行）子元素出现换行时使用，在单行下没有效果 */
  div{
      display: flex;
      flex-wrap: wrap;
      /* 侧轴垂直居中 */
      align-content: center;
      /* justify-content: ; */
      /* align-content: flex-end;在侧轴尾部开始排列 */
      /* align-content: flex-start;在侧轴头部开始排列 */
      /* align-content: space-around;在侧轴平分剩余空间 */
      /* align-content: space-between;先分布在侧轴两头，在平分剩余空间 */
      width: 700px;
      height: 400px;
      background-color: skyblue;
  }
  span{
      width: 150px;
      height: 100px;
      background-color: pink;
      margin: 10px;
  }
    </style>
</head>
<body>
   <div>
       <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
   </div>
</body>
</html>